
{% load static%}
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
<title>纺织品异常检测系统</title>

<link href="{% static 'css/style.css' %}"rel="stylesheet" >
<link href="{% static 'css/style02.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'js/bstable/css/bootstrap.min.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'js/bstable/css/bootstrap-table.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'js/scroll/css/liMarquee.css' %}" rel="stylesheet" type="text/css">



</head>
<body onload="change1(),change()">
    
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="{% static 'js/jquery.js' %}"></script>
<script src="{% static 'js/layer_v2.1/layer/layer.js' %}"></script>
<script src="{% static 'js/echarts/echarts-all.js' %}"></script>
<script src="{% static 'js/bstable/js/bootstrap-table.js' %}"></script>
<script src="{% static 'js/bstable/js/bootstrap-table-zh-CN.min.js' %}"></script>
<script src="{% static 'js/home_table.js' %}"></script>
<script src="{% static 'js/home_chart.js' %}"></script>
<script type="text/javascript" src="{% static 'js/scroll/js/jquery.liMarquee.js' %}"></script>
 
<div class="div_home">
   <div class="home_title">
   </div>
<div>


</div>
<div class="clear"></div>
<div class="left_top" style="margin-top: -4%">实时统计信息</div>
<div class="right_top"style="margin-top: -4%" >异常信息监控</div>
<div class="clear"></div>
    <div class="left_con1">
        <div class="con_p1">
<div class="p_a">
    <span class="p_a01">正常<p>数量</p></span><span class="p_a02 normalNum">{{ nor_num }}</span>
</div>
            <div class="p_a">
                <span class="p_a01">异常<p>数量</p></span><span class="p_a03 anomalyNum">{{ ano_num }}</span>
            </div>
        </div>
        <div class="con_p1">
                <span class="p_a01">设备<p>状态</p></span><span class="p_a02">设备在线：1、2、3</span>
        </div>
    </div>
<div class="right_con1" >
    <div id="con1" style="width: 92%;height: 92%;margin-left: 2%;margin-top: 2%;overflow: hidden"></div>
</div>
<div class="clear"></div>
    <div class="left_top">设备列表</div>
<div class="right_top" >异常分析</div>
<div class="clear"></div>
    <div class="left_con2">
        <h5 class="h_style"><i class="i_h"></i><span>检测异常数量</span></h5>
        <div  class="con1_cum1" >
            <div id="left01" style="width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden"></div>
        </div>
        <h5 class="h_style"><i class="i_h"></i><span>检测异常饼图</span></h5>
        <div class="con1_cum1" >
            <div id="left02" style="width: 100%;height: 96%;padding: 0;margin-top: -2%;margin-left: 2%"></div>
        </div>
    </div>
<!-- <div class="right_con2">
    <div id="con2" style="width: 98%;height: 98%;margin: 0;padding: 5%"></div>
</div>
<div class="clear"></div>
    <div class="left_top">实时报警信息</div>
<div class="clear"></div> -->
<div class="right_con2">
    <div class="ul_top"><span>状况</span><span>设备</span><span>数量</span><span>时间</span></div>
    <div style="width: 96%;height: 96%;background: transparent;margin-top: 2%" id="div01" >
   <ul class="ul_con"  >
   </ul>
    </div>
</div>
<div class="clear"></div>
<div class="toast-container">
    <!-- Toast 消息将会被动态插入这里 -->
</div>
<div class="div_bottom"><div class="bot_left"><a href="#" onclick="add()" class="title_but">视频监控 </a><a href="#" class="title_but"  onclick="addFind()">信息查询 </a></div>
<div class="video_bg">
        <div>
            <img id="video" style="width: 100%; height: 100%;">
        </div>
</div>
</div>
<script>
    function fetchDataAndUpdate() {
    fetch('/api/get-latest-data/')
        .then(response => response.json())
        .then(data => {
            // 更新正常数量
            document.querySelector('.normalNum').textContent = data.nor_num;
            // 更新异常数量
            document.querySelector('.anomalyNum').textContent = data.ano_num;
        })
        .catch(error => console.error('Error fetching data:', error));
    }

    // 初次加载时调用一次函数获取并更新数据
    fetchDataAndUpdate();

    // 定期更新数据，每10秒更新一次
    setInterval(fetchDataAndUpdate, 10000);  // 10秒更新一次
</script>
<script>
    let wss_url = "ws://192.168.162.1:8168/";  // 将这里的IP替换为你的本地电脑的公网IP或域名
    let ws = new WebSocket(wss_url);

    ws.onopen = function(evt) {
        console.log("WebSocket connection opened.");
    };

    ws.onmessage = function(evt) {  
        document.getElementById("video").src = evt.data;
    };

    ws.onclose = function(evt) {
        console.log("WebSocket connection closed.");
    };
</script>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const container = document.querySelector(".toast-container");
    // 创建 Toast 的 HTML
    function getToastHtml(type, message) {
        return `
            <div class="toast" data-type="${type}">
                <div class="toast_inner">
                    <div class="toast_icon">
                        <svg id="warning" xmlns="http://www.w3.org/2000/svg" width="800" height="800" fill="none" viewBox="0 0 24 24">
                            <path d="M1.333 8.074a1 1 0 1 0 1.334 1.49l-1.334-1.49Zm20 1.49a1 1 0 1 0 1.334-1.49l-1.334 1.49ZM12 19a1 1 0 1 0 0 2v-2Zm.01 2a1 1 0 1 0 0-2v2Zm2.68-3.96a1 1 0 0 0 1.346-1.48l-1.346 1.48Zm3.364-3.7a1 1 0 0 0 1.346-1.48l-1.346 1.48Zm-10.09 2.22a1 1 0 0 0 1.345 1.48l-1.345-1.48ZM4.6 11.86a1 1 0 1 0 1.346 1.48L4.6 11.86Zm5.97-7.797a1 1 0 0 0 .177 1.992l-.177-1.992Zm6.77 6.317a1 1 0 1 0-.973 1.748l.972-1.748ZM3.706 2.293a1 1 0 0 0-1.414 1.414l1.414-1.414Zm16.586 19.414a1 1 0 0 0 1.414-1.414l-1.414 1.414ZM12 6c3.586 0 6.856 1.347 9.333 3.565l1.334-1.49A15.944 15.944 0 0 0 12 4v2Zm0 15h.01v-2H12v2Zm0-5c1.037 0 1.98.393 2.69 1.04l1.346-1.48A5.982 5.982 0 0 0 12 14v2Zm-2.69 1.04A3.982 3.982 0 0 1 12 16v-2a5.982 5.982 0 0 0-4.036 1.56l1.345 1.48Zm1.437-10.985C11.16 6.02 11.577 6 12 6V4c-.482 0-.958.021-1.43.063l.177 1.992Zm5.62 6.073a9.031 9.031 0 0 1 1.687 1.212l1.346-1.48a11.03 11.03 0 0 0-2.06-1.48l-.973 1.748ZM2.293 3.708 5.466 6.88l1.415-1.415-3.174-3.173-1.414 1.414Zm.374 5.857a14.01 14.01 0 0 1 3.895-2.47l-.777-1.843a16.01 16.01 0 0 0-4.452 2.822l1.334 1.49Zm2.8-2.684 3.993 3.994 1.415-1.415L6.88 5.466 5.466 6.881Zm3.993 3.994 10.833 10.832 1.414-1.414L10.875 9.46 9.46 10.875ZM5.946 13.34a8.97 8.97 0 0 1 4.404-2.19l-.365-1.966A10.97 10.97 0 0 0 4.6 11.861l1.346 1.48Z"></path>
                        </svg>
                    </div>
                    <div class="toast_text"> 
                        ${message}
                    </div>
                </div>
            </div>
        `;
    }

    // 显示 Toast 弹窗
    function showToast(type, message) {
        const toastHtml = getToastHtml(type, message);
        container.insertAdjacentHTML("beforeend", toastHtml);

        // 自动移除弹窗
        const toast = container.lastElementChild;
        setTimeout(() => {
            toast.classList.add("toast_out");
            setTimeout(() => toast.remove(), 250); // 完成动画后移除元素
        }, 5000); // 弹窗显示 3 秒后关闭
    }

    let previousDevice1Count = 0;
    let previousDevice2Count = 0;

    // 定期检查设备文件夹的图片数量
    function checkForChanges() {
        // 发送请求并将前一次的计数通过查询参数传递给后端
        fetch(`/api/get-latest-error/?previous_device1_count=${previousDevice1Count}&previous_device2_count=${previousDevice2Count}`)
            .then(response => response.json())
            .then(data => {
                // 检查返回的数据中设备1和设备2是否发生变化
                if (data.device1_changed) {
                    showToast('warning', 'Device1 检测到异常！');
                }
                if (data.device2_changed) {
                    showToast('warning', 'Device2 检测到异常！');
                }

                // 更新本地保存的计数，以备下次比较
                previousDevice1Count = data.current_device1_count;
                previousDevice2Count = data.current_device2_count;
            })
            .catch(error => console.error('Error fetching data:', error));
    }

    // 每 3 秒钟调用一次 checkForChanges 函数
    setInterval(checkForChanges, 3000);
});


</script>


<script>
    function change1() {
        var w01 = $(window).width();
        $(".home_title1").css('width', w01 - 600+"px");
    }
    function change() {
        var th01 = $(window).height();
        $(".div_right").css('height', th01 - 24+"px");
    }
</script>
<script>
    $(function(){
        $('#div01').liMarquee({
            direction: 'down',
            scrollamount: 30
        });
    });
</script>
<script>
    $(function(){
        $('#div02').liMarquee({
            direction: 'down',
            scrollamount: 30
        });
    });
</script>



<script>
    function add() {

        layer.open({
            type: 2,
            skin: 'demo-class',

            title: '视频监控',
            fix: true,
            shadeClose: true,

            area: ['1400px', '700px'],
            content: "car-control"

        });
    }
    function addFind() {

        layer.open({
            type: 2,
            skin: 'demo-class',

            title: '信息查询',
            fix: true,
            shadeClose: true,

            area: ['1400px', '700px'],
            content: 'car',

        });
    }
    function addAy(){
        layer.open({
            type: 2,
            title: '综合分析',
            shadeClose: true,
            shade: 0.5,
            skin: 'layui-layer-rim',
            closeBtn:1,
            area: ['80%', '700px'],
            content: 'correctSpecial_analysis.html'
        });
    }
    function sumitT(){
        layer.open({
            type: 2,
            title: '信息反馈',
            shadeClose: true,
            shade: 0.5,
            skin: 'layui-layer-rim',
            closeBtn:1,
            area: ['80%', '700px'],
            content: 'validate.html'
        });
    }
</script>

</body>
</html>
